<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>正在参与竞拍的界面</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<!--时间选择插件-->
<link rel="stylesheet" href="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
<!--日期选择插件-->
<link rel="stylesheet" href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">

</head>
  
<body>
<div class="container-fluid p-t-15">
    <div id="app"  shiro:hasRole="seller"   style="position: fixed;margin-top:30px;left: 300px">
        <table border="1px" width="800">
            <tr id="auctioningNowul"   style="font-size: 24px;">
                <td class="jingpaili">列表id</td>
                <td class="jingpaili">竞价室id</td>
                <td class="jingpaili">商品id</td> 
                <td class="jingpaili">目前最高价格</td>
                <td class="jingpaili">时间</td>
                <td class="jingpaili">是否进入</td>
                <td class="jingpaili">取消竞拍</td>
            </tr>
            <tr v-for="(biddingroom,key) in  biddingRooms">
            	<td>{{key+1}}</td>
            	<td>{{biddingroom.br_id}}</td>
            	<td>{{biddingroom.p_id}}</td>
            	
            	<td>{{biddingroom.max_price}}</td>
            	<td>{{biddingroom.time}}</td>
            	<td><a href="#" @click="tiao(biddingroom)">Welcome</a></td>
            	<td><button @click="dele(biddingroom)">删除</button></td>
            </tr>
            
        </table>
    </div>
  
  
</div>

<script type="text/javascript">
	new Vue  ({
		el:"#app",
		data:{
			biddingRooms:[],
			
			
				
		},
		mounted(){
			
		
			axios.get("BiddingRoom/find?u_id=2").then(res =>{
				this.biddingRooms= res.data.data;
				console.info(this.biddingRooms);
			})
		},
		  methods:{
			dele:function(biddingroom){
				
				//发送请求  将uid和pid传到后端删除竞价室表中数据
				 axios.get("BiddingRoom/deleroomByuidAndpid?pid="+biddingroom.p_id).then(res =>{
					 /* alert("asd"); */
					
				}) 
				
				//修改前端数据
				
				for(var i=0;i<this.biddingRooms.length;i++){
					var b = this.biddingRooms[i];
					if(b.pid==biddingroom.pid){
						this.biddingRooms.splice(i,1);
						break;
					}
				}
				
				 var bides  = this.biddingRooms;
				 this.biddingRooms = null;
				 this.biddingRooms = bides;
			},
		
		/* 跳转到竞价室页面 */
		tiao: function(biddingroom){
			window.location.href = "4040.html?p_id="+biddingroom.p_id;
		}
		
			
			
		
		}
		
		
	
	})
	

</script>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--时间选择插件-->
<script src="js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>